import React, { Component } from 'react';
import { Form, Input, Button, message } from 'antd';
// import axios from 'axios';
import memory from '../../utils/memory';
import storage from '../../utils/storage';
import { reqLogin } from '../../api';
import './login.css'
//登录界面-路由组件
class Login extends Component {

    onFinish = async (values) => {
        try {
            const loginRes = await reqLogin(values.username);
            if (loginRes.data.length == 1) {
                if (values.password == loginRes.data[0].password) {
                    message.success('登陆成功');
                    //保存用户信息
                    let user = loginRes.data[0];
                    memory.user = user; // 内存中
                    console.log(user);
                    storage.saveUser(user) // local中
                    // 跳转到管理界面
                    this.props.history.replace('/')
                } else {
                    message.error('登陆失败，密码错误');
                }
            } else {
                message.error('登陆失败，账号不存在');
            }
        } catch (err) {
            message.error('登陆失败,服务器出错');
            console.log('err', err);
        }
    };

    onFinishFailed = (errorInfo) => {
        message.error('登陆失败，请检查用户名和密码');
    };
    render() {
        // 如果用户已经登陆
        if (memory.user && memory.user.id) {
            this.props.history.replace('/')
        }
        return (
            <div className='login'>
                <header className='login-header'>
                    <h1>汽车4S店——后台管理系统</h1>
                </header>
                <section className='login-content'>
                    <p>用户登录</p>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                        autoComplete="off"
                        onFieldsChange={this.onFieldsChange}//内容发生改变时调用的函数
                    >
                        <Form.Item label="用户名" name="username" rules={[
                            { required: true, message: '请输入账号!', },
                            { min: 4, message: '账号长度在4~16位之间', },
                            { max: 16, message: '账号长度在4~16位之间', }
                        ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[
                                { required: true, message: '请输入密码!', },
                                { min: 4, message: '密码长度在4~16位之间', },
                                { max: 16, message: '密码长度在4~16位之间', }
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            name="remember"
                            valuePropName="checked"
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                        </Form.Item>

                        <Form.Item >
                            <Button type="primary" htmlType="submit" className='login-btn'>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </section>
            </div>
        );
    }
}

export default Login;